<template>
  <div>
    <Header>
      <div slot="mianbaoxie">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页|数据可视化</el-breadcrumb-item>
           <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </Header>
    <div class="create">
      <el-button type="primary" plain @click="$router.push('/home/itemlist/add')">添加商品</el-button>
      <JsonExcel
        :data = "itemlist"
        :fields = "json_fields"
        worksheet = "My Worksheet"
        type = "csv"
        name = "filename.xls">
        <el-button type="info" plain @click="exprt_excel">导出Excal</el-button>
      </JsonExcel>
    </div>
    <el-table
      :data="itemlist"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        width="40"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="itemName"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="itemDesc"
        label="描述"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="itemPrice"
        sortable
        label="价格">
      </el-table-column>
      <el-table-column
        label="图片">
        <template slot-scope="scope">
          <!-- <span>{{scope.row.thumb}}</span> -->
          <!-- <img :src="scope.row.thumb" alt=""> -->
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.thumb"
              :preview-src-list="[scope.row.thumb]">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="createAt"
        sortable
        label="日期">
      </el-table-column>
      <el-table-column
        prop=""
        label="操作">
        <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
     <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="100"
        class="style"
        background>
      </el-pagination>
  </div>
</template>

<script>
import JsonExcel from 'vue-json-excel'
import Header from '_componet/Header'
import { fetchItems } from '_api'
import dayjs from 'dayjs'
import { MessageBox, Loading, Message } from 'element-ui'
export default {
  data () {
    return {
      itemlist: [],
      currentPage: 1,
      json_fields: {
        ID: 'id',
        商品名称: 'itemName',
        价格: 'itemPrice',
        图片: 'thumb',
        上架时间: 'creatAt',
        富文本: 'content'
      }
    }
  },
  created () {
    this.fetchItems()
  },

  methods: {
    // 商品操作
    handleEdit (index, row) {
      this.$router.push(`/home/itemlist/write/${row.id}`)
    },
    handleDelete (index, row) {
      MessageBox({
        title: '删除商品',
        type: 'warning',
        message: '确定删除该商品吗？',
        showClose: false,
        showCancelButton: true,
        closeOnClickModal: false,
        callback: (action) => {
          if (action === 'confirm') {
            // 发送删除数据请求
            const loading = Loading.service({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            setTimeout(() => {
              loading.close()
              Message({
                message: '成功删除',
                type: 'success',
                center: true,
                duration: 500,
                offset: 100
              })
              this.fetchItems()
            }, 2000)
          }
        }
      })
    },
    // 导出Excel
    exprt_excel () {
      console.log(this.item[0])
    },
    // 分页
    handleCurrentChange (val) {
      this.fetchItems({
        pages: 10
      })
    },
    // 获取商品数据
    fetchItems () {
      fetchItems({
        page: 5
      }).then(res => {
        if (res.data.code === 200) {
          this.itemlist = res.data.data
          this.itemlist.forEach(item => {
            item.createAt = dayjs(item.createAt).format('YYYY-MM-DD')
          })
        }
      })
    }
  },
  components: { Header, JsonExcel }
}
</script>

<style lang="scss" scoped>
.style{
  margin: 10px 0;
  text-align: center;
}

.create{
  display: flex;
  margin: 10px 0;
  justify-content: space-between;
}
.el-button{
  margin: 0 10px;
}
</style>
